<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>保险订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>修改保险订单</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card>
      <el-form label-width="80px" :model="ruleForm">
        <el-col :span="11">
          <el-form-item label="客户名称">
            <el-input v-model.lazy="ruleForm.clientId.username" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="保险名称">
            <el-input v-model.lazy="ruleForm.insurancesId.name" :disabled="true"></el-input>
            
          </el-form-item>
          <el-form-item label="保险类型">
            <el-input v-model.lazy="ruleForm.insurancesId.insuranceTypeId.name" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="价格">
            <el-input v-model.lazy="ruleForm.insurancesId.price"></el-input>
          </el-form-item>
          <el-form-item label="生效时间">
            <el-input v-model.lazy="ruleForm.time"></el-input>
          </el-form-item>
          <el-form-item label="订单状态">
            <el-select v-model="orderType" clearable placeholder="订单状态">
              <el-option v-for="item in options" :key="item._id" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="ch">提交</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-card>
    <!-- 卡片视图 -->
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions } = createNamespacedHelpers("order");
export default {
  data() {
    return {
      ruleForm: {
        name: "",
        status: "",
        time: "",
        claim: "",
        clientId: {},
        insurancesId: {
          insuranceTypeId: {},
        },
      },
      options: [
        "已退保",
        "未生效",
        "生效中",
        "待生效",
        "待支付",
        "保全受理中",
        "已取消",
        "已过期",
        "理赔中",
      ],
      orderType: "",
    };
  },
  computed: {
    ...mapState(["update"]),
  },
  created() {
    //接受这个id
    const id = this.$route.params._id;
    this.getOrder(id);
  },
  watch: {
    update(val) {
      this.ruleForm = val;
      this.orderType = val.status;
    },
  },
  methods: {
    ...mapActions(["getOrder", "updateOrderSuccess"]),

    ch() {
      this.ruleForm.status = this.orderType;
      console.log(this.ruleForm);
      this.updateOrderSuccess(this.ruleForm);
      this.$confirm(
        "检测到未保存的内容，是否在离开页面前保存修改？",
        "确认信息",
        {
          distinguishCancelAndClose: true,
          confirmButtonText: "保存",
          cancelButtonText: "放弃修改",
        }
      )
        .then(() => {
          this.$message({
            type: "info",
            message: "保存修改",
          });
          this.$router.push("/Orderlist");
        })

        .catch((action) => {
          this.$message({
            type: "info",
            message:
              action === "cancel" ? "放弃保存并离开页面" : "停留在当前页面",
          });
        });
    },
  },
};
</script>

<style>
</style>